<template>
  <el-card>
    <el-button type="primary" :icon="Plus" :disabled="!categoryStore.category3Id" @click="toShowSpuForm">添加SPU</el-button>
    <el-table border :data="spuList" v-loading="loading" style="margin:10px 0">
      <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row,$index}">
          <el-tooltip class="box-item" effect="dark" content="添加SKU" placement="top">
            <el-button type="primary" size="small" :icon="Plus" @click="toAddSkuInfo(row)" />>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="编辑SPU" placement="top">
            <el-button type="primary" size="small" :icon="Edit" @click="toEditSpuInfo(row)" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看SKU" placement="top">
            <el-button type="info" size="small" :icon="InfoFilled" @click="toCheckSkuList(row)" />
          </el-tooltip>

          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF" title="Are you sure to delete this?" @confirm="toDeleteSpuInfo(row,$index)">
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination 
    v-model:current-page="currentPage" 
    v-model:page-size="pageSize" 
    :page-sizes="[3,6,9,12]" 
    :small="small" :disabled="disabled" 
    :background="background" 
    layout=" prev, pager, next, jumper, ->,sizes,total" 
    :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />

    
    <!-- 弹出来的对话框 -->
    <el-dialog v-model="skuListTableVisible" title="Sku列表数据">
      <el-table :data="skuList">
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格(元)" width="200" />
        <el-table-column property="weight" label="重量(KG)" />
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <el-image :src="row.skuDefaultImg" style="width:100px"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </el-card>

</template>

<script lang="ts">
export default {
  name: 'SpuList'
};
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reqGetSpuListData, reqDeleteSpuInfo} from '@/api/product/spu';
import {reqDeleteAttrInfo } from '@/api/product/attr'
import { useCategoryListStore } from '@/stores/categoryList';
import { ShowStatus } from '../types';
import { ElMessage } from 'element-plus';
import { reqCheckSkuListData } from '@/api/product/sku'


//接收自定义事件
const emits = defineEmits(['setShowStatus', 'getSpuInfo']);

const categoryStore = useCategoryListStore();

// 定义数据初始值
const spuList = ref([]);
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);
const small = ref(false);
const disabled = ref(false);
const loading = ref(false);
const background = ref(false);
const skuListTableVisible = ref(false);
const skuList = ref([])

// 1. 定义一个获取spuList列表数据的函数
const getSpuListData = async () => {
  loading.value = true;
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id);

  // 赋值
  loading.value = false;
  spuList.value = result.records;
  total.value = result.total;
};

// 2. 监听三级导航id变化 然后获取spu列表数据
watch(
  () => categoryStore.category3Id,
  category3Id => {
 
    if (!category3Id) return (spuList.value = []);

    // 重新获取数据
    getSpuListData();
  },
  {immediate:true}
);

//单击页码实现分页效果
const handleCurrentChange = (val: number) => {

  currentPage.value = val;

  // 重新获取数据
  getSpuListData()
};
// 修改每页显示的数量
const handleSizeChange = (val: number) => {
 
  pageSize.value = val;
  currentPage.value = 1;

  getSpuListData()
};

//去跳转到添加spuForm的页面 也就是更改status的值
const toShowSpuForm = () => {
  emits('getSpuInfo',{})
  emits('setShowStatus', ShowStatus.SPU_FORM);
};



//删除spu
const toDeleteSpuInfo = async(row,index)=>{
  await reqDeleteAttrInfo(row.id)
  ElMessage.success('删除spu成功')

  // getSpuListData()
  //减少一次的请求发送
  spuList.value.splice(index,1)
}

//编辑spuInfo
const toEditSpuInfo =(row)=>{
  //数据传给父组件
  emits('getSpuInfo',row)

  //页面切换
  emits('setShowStatus',ShowStatus.SPU_FORM)
}

//添加sku跳转页面
const toAddSkuInfo=(row)=>{
emits('getSpuInfo',row)
emits('setShowStatus',ShowStatus.SKU_FORM)
}

//查看sku数据
const toCheckSkuList = async row => {
  const result = await reqCheckSkuListData(row.id);
  skuListTableVisible.value = true;
  skuList.value = result;
}

</script>

<style scoped>
</style>